/**************************************
 *
 * VLOOK™ CSS - Mermaid 自定义样式
 * (配合 base.less 进行使用)
 *
 * V28.1
 * 2025-01-18
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

:root {
    // 针对 #Mermaid_Var
    // --mm-sequence-numbers: on;
    --mermaid-sequence-numbers: on;

    // --mm-flowchart-curve: basis;
    --mermaid-flowchart-curve: basis;

    // --mermaid-font-family: var(--v-f-fm-bd);

    // 针对 #ZenUML_Var

    // --mm-c-rd: var(--ac-rd);
    // --mm-c-rd-a: var(--ac-rd-a);
    // --mm-c-og: var(--ac-og);
    // --mm-c-og-a: var(--ac-og-a);
    // --mm-c-ye: var(--ac-ye);
    // --mm-c-ye-a: var(--ac-ye-a);
    // --mm-c-gn: var(--ac-gn);
    // --mm-c-gn-a: var(--ac-gn-a);
    // --mm-c-bu: var(--ac-bu);
    // --mm-c-bu-a: var(--ac-bu-a);
    // --mm-c-pu: var(--ac-pu);
    // --mm-c-pu-a: var(--ac-pu-a);
    // --mm-c-cy: var(--ac-cy);
    // --mm-c-cy-a: var(--ac-cy-a);
    // --mm-c-ro: var(--ac-ro);
    // --mm-c-ro-a: var(--ac-ro-a);
    // --mm-c-bn: var(--ac-bn);
    // --mm-c-bn-a: var(--ac-bn-a);
    // --mm-c-gy: var(--ac-gy);
    // --mm-c-gy-a: var(--ac-gy-a);
}

// ** 注意 **
// 更改某些段与字体相关的样式时，须同步修改切换字体样式的 JS 代码
// 这些样式包括 #JS 字样

// 全局文本设置
svg[aria-roledescription] :is(.label, .edgeLabel, .nodeLabel) {
    color: var(--d-fc) !important;
    fill: var(--d-bc) !important;
    background-color: transparent !important;
}
svg[aria-roledescription] :is(.entityLabel, .relationshipLabel) {
    fill: var(--d-fc) !important;
}

svg[aria-roledescription] {
    fill: var(--d-bc) !important;
    background-color: var(--d-bc) !important;
}

// 鼠标悬停
svg[aria-roledescription] .node:hover {
    cursor: crosshair;
}
svg[aria-roledescription] .node:hover @{svgNodes} {
    fill: var(--ac-t1-a) !important;
    stroke: var(--a-color) !important;
    cursor: crosshair;
}
svg[aria-roledescription] .node[id^="flowchart-inpage"]:hover circle,
svg[aria-roledescription] .node[id^="flowchart-outpage"]:hover polygon {
    stroke: var(--a-color) !important;
}

svg[aria-roledescription] .label div {
    text-align: center;
}

.md-diagram-panel svg {
    display: block;
}

.md-diagram-panel,
.md-diagram-panel svg {
    color: var(--d-fc) !important;
}

// 可点击对象
svg[aria-roledescription] .clickable:hover @{svgNodes} {
    cursor: var(--cur-pointer) !important;
}

/* ----- pie diagram 饼图 ----- */

// 外框
svg[aria-roledescription="pie"] .pieOuterCircle {
    stroke: var(--d-fc-a) !important;
    stroke-width: 6px !important;
}

// 饼块
svg[aria-roledescription="pie"] .pieCircle {
    stroke: var(--d-fc) !important;
    stroke-width: 1px !important;
    opacity: .5 !important;
}
svg[aria-roledescription="pie"] .pieCircle:hover {
    fill: var(--d-bc) !important;
    stroke-width: 6px !important;
    opacity: 1 !important;
    cursor: crosshair;
}

// 标题、图例文本
svg[aria-roledescription="pie"] .pieTitleText {
    fill: var(--d-fc) !important;
    font-weight: var(--v-f-w-title) !important;
    font-size: 1.5em !important;
}
svg[aria-roledescription="pie"] .legend text {
    fill: var(--d-fc) !important;
    font-weight: var(--v-f-w-bd) !important;
}

svg[aria-roledescription="pie"] :is(.pieTitleText, .slice) {
    font-weight: var(--v-f-w-bd) !important;
}

/* ----- flow diagram 流程图 ----- */

// 节点文本
svg[aria-roledescription^="flowchart"] .nodeLabel {
    color: var(--d-fc) !important;
}

@stateNodes: ~":is(polygon, path, rect)";

// 图元节点
svg[aria-roledescription^="flowchart"] .node @{svgNodes} {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc) !important;
}

// 自定义：节点文本
svg[aria-roledescription^="flowchart"] .nodes:has(.node[id^="flowchart-INIT"]) .nodeLabel {
    color: var(--d-bc) !important;
    font-weight: bold !important;
}
// 自定义：图元节点
svg[aria-roledescription^="flowchart"] .nodes:has(.node[id^="flowchart-INIT"]) @{stateNodes} {
    fill: var(--d-fc) !important;
    stroke-width: 0 !important;
}

svg[aria-roledescription^="flowchart"] .nodes:has(.node[id^="flowchart-INIT"]) .node:hover @{stateNodes} {
    fill: var(--ac-t1) !important;
    cursor: crosshair;
}

// 自定义：同页、离页、
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-inpage"] circle,
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-outpage"] polygon {
    fill: none !important;
    stroke: var(--d-fc-a) !important;
}

// 自定义：汇聚样式的多边形（菱形、梯形、平行四边形、圆形等）
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-join"]>@{stateNodes},
svg[aria-roledescription^="flowchart"] .nodes:has(.node[id^="flowchart-INIT"]) .node[id^="flowchart-join"]>@{stateNodes} {
    fill: var(--d-fc-a) !important;
    stroke-width: 0 !important;
}
@joinXY: -30px;
@joinWidth: 60px;
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-join"]>rect {
    x: @joinXY !important;
    y: -4px !important;
    width: @joinWidth !important;
    height: 8px !important;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-joinv"]>rect {
    x: -4px !important;
    y: @joinXY !important;
    width: 8px !important;
    height: @joinWidth !important;
}

// 在特定节点上鼠标悬停
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-START"]:hover rect,
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-join"]:hover @{stateNodes},
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-INIT"]:hover circle,
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-FINAL"]:hover circle {
    fill: var(--a-color) !important;
    stroke: var(--a-color) !important;
    cursor: crosshair;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-FINAL"]:hover circle {
    fill: none !important;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-END"]:hover rect {
    stroke: var(--a-color) !important;
    cursor: crosshair;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-START"]:hover rect + .label .nodeLabel,
svg[aria-roledescription^="flowchart"] .nodes:has(.node[id^="flowchart-INIT"]) .node:hover rect + .label .nodeLabel {
    color: @buttonForeColor !important;
}

// 鼠标在图元文本上悬停
svg[aria-roledescription^="flowchart"] .node:hover .label .nodeLabel {
    color: var(--a-color) !important;
}

// 实条
svg[aria-roledescription^="flowchart"] .edgePaths path {
    stroke: var(--d-fc-a) !important;
}
// 虚线
svg[aria-roledescription^="flowchart"] .edgePath .path[style*="stroke-dasharray"] {
    stroke-width: 1.5 !important;;
}

// 线条箭头
svg[aria-roledescription^="flowchart"] .marker.flowchart {
    fill: var(--d-fc-a) !important;
    stroke: var(--d-fc-a) !important;
}

// 线条文本背景
svg[aria-roledescription^="flowchart"] .edgeLabel .label div {
    background-color: var(--d-bc) !important;
}

// 线条文本上鼠标悬停
svg[aria-roledescription^="flowchart"] .label .edgeLabel:hover {
    color: var(--a-color) !important;
    cursor: crosshair;
}

// 子图、分组
svg[aria-roledescription^="flowchart"] .cluster rect {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 6 6 !important;
}

// 子图、分组文本
svg[aria-roledescription^="flowchart"] .cluster-label .nodeLabel { // keyword: flowchart
    margin-left: 0 !important;
   font-size: .875em !important;
}
// 鼠标悬停
svg[aria-roledescription^="flowchart"] .cluster:hover rect {
    fill: var(--ac-t1-a) !important;
    stroke: var(--a-color) !important;
    cursor: crosshair;
}
svg[aria-roledescription^="flowchart"] .cluster:hover .cluster-label .nodeLabel {
    color: var(--a-color) !important;
    cursor: crosshair;
}

// 自定义：流程图「开始」样式
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-START"] rect {
    fill: var(--d-fc) !important;
    stroke: var(--d-fc) !important;
    stroke-width: 0 !important;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-START"] rect + .label .nodeLabel { // keyword: flowchart
    color: var(--d-bc) !important;
}

// 自定义：流程图「结束」节点样式
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-END"] rect {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc) !important;
    stroke-width: 4 !important;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-END"] rect+.label div {
    color: var(--d-fc) !important;
}

// 自定义：状态机图「初始」状态样式
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-INIT"] circle {
    fill: var(--d-fc) !important;
    stroke-width: 0 !important;
}

// 自定义：状态机图「最终」状态节点样式
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-FINAL"] circle {
    fill: none !important;
    stroke: var(--d-fc) !important;
    stroke-width: 4 !important;
}
svg[aria-roledescription^="flowchart"] .node[id^="flowchart-FINAL"] circle+.label div {
    color: var(--d-fc) !important;
}

/* ----- sequence diagram 顺序图 / 时序图 ----- */

// 前端触点角色
svg[aria-roledescription="sequence"] .actor-man>:is(line, circle) {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}
svg[aria-roledescription="sequence"] .actor-man:hover>:is(line, circle, text)  {
    stroke: var(--a-color) !important;
    stroke-width: 2 !important;
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] .actor-man:hover>circle {
    fill: var(--ac-t1-a) !important;
    stroke-width: 2 !important;
    cursor: crosshair;
}

// 默认角色
svg[aria-roledescription="sequence"] .actor {
    stroke: var(--d-fc-a) !important;
    fill: var(--pn-c) !important;
    stroke-width: 1;
}

// 角色上鼠标悬停
svg[aria-roledescription="sequence"] g:hover>:is(.actor, line[id^="actor"]) {
    fill: var(--ac-t1-a) !important;
    stroke: var(--a-color) !important;
    stroke-width: 2 !important;
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] g:hover>rect {
    fill: var(--ac-t1-a) !important;
    stroke: var(--a-color) !important;
    stroke-width: 1 !important;
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] g:hover text.actor>tspan {
    fill: var(--a-color) !important;
}

// 角色文本
svg[aria-roledescription="sequence"] text.actor>tspan {
    fill: var(--d-fc) !important;
    stroke: none !important;
    font-weight: var(--v-f-w-bd);
}

// 角色生命线
svg[aria-roledescription="sequence"] line[id^="actor"] {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}

// 消息文本
svg[aria-roledescription="sequence"] .messageText {
    fill: var(--d-fc) !important;
    stroke: none !important;
    font-weight: normal !important;
}

// 消息：实线
svg[aria-roledescription="sequence"] .messageLine0 {
    stroke-width: 2 !important;
    stroke: var(--d-fc) !important;
}

// 消息：虚线
svg[aria-roledescription="sequence"] .messageLine1 {
    stroke-width: 2 !important;
    stroke: var(--d-fc) !important;
    stroke-dasharray: 6, 3 !important;
}

// 消息箭头
svg[aria-roledescription="sequence"] #arrowhead path,
svg[aria-roledescription="sequence"] #filled-head path {
    fill: var(--d-fc) !important;
    stroke: none !important;
}

// 消息上鼠标悬停
svg[aria-roledescription="sequence"] .messageText:hover,
svg[aria-roledescription="sequence"] .messageText:hover + :is(.messageLine0, .messageLine1) + .sequenceNumber {
    fill: var(--a-color) !important;
    font-weight: var(--v-f-w-bd) !important;
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] .messageText:hover + :is(.messageLine0, .messageLine1) {
    stroke: var(--a-color) !important;
}

// 消息序号
svg[aria-roledescription="sequence"] .sequenceNumber {
    color: var(--d-bc) !important;
    fill: var(--d-bc) !important;
    font-weight: var(--v-f-w-bd) !important;
}

// 消息序号背景
svg[aria-roledescription="sequence"] #sequencenumber {
    fill: var(--d-fc) !important;
    stroke: var(--d-fc) !important;
    stroke-width: 0 !important;
    transform: scale(.5);
    transform-origin: 15px 15px;
}

// 异步消息箭头
svg[aria-roledescription="sequence"] #crosshead path {
    fill: var(--d-fc-a) !important;
    stroke: var(--d-fc) !important;
}

// 活动块
svg[aria-roledescription="sequence"] rect[class^="activation"] {
    fill: var(--d-fc-a) !important;
    stroke-width: 0 !important;
}

// 片断的类型标签背景
svg[aria-roledescription="sequence"] .labelBox {
    stroke: none !important;
    fill: var(--ac-pu) !important;
}

// 角标
// 片断的类型文本
svg[aria-roledescription="sequence"] g>.labelText {
    fill: #FFFFFF !important;
    font-weight: var(--v-f-w-gd) !important;
}

//片断的标题标签文本
svg[aria-roledescription="sequence"] .loopText {
    fill: var(--ac-pu-lg) !important;
    font-weight: var(--v-f-w-bd) !important;
}
svg[aria-roledescription="sequence"] :is(.loopText:hover, .loopText:hover>tspan) {
    cursor: crosshair;
}

// 片断的线框
svg[aria-roledescription="sequence"] .loopLine {
    stroke-width: 1 !important;
    stroke-dasharray: none !important;
    stroke: var(--ac-pu) !important;
}

// 片断上鼠标悬停
svg[aria-roledescription="sequence"] g:hover>.loopLine {
    stroke-width: 4 !important;
    stroke-linecap: round !important;
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] g:hover>polygon,
svg[aria-roledescription="sequence"] g:hover>.loopText>tspan {
    cursor: crosshair;
}
svg[aria-roledescription="sequence"] g:hover>.labelText {
    cursor: crosshair;
}

// 备注背景
svg[aria-roledescription="sequence"] .note {
    stroke: var(--ac-ye) !important;
    stroke-width: 0 !important;
    fill: var(--ac-ye-a) !important;
}

// 备注文本
svg[aria-roledescription="sequence"] .noteText tspan {
    fill: var(--d-fc) !important;
    stroke: none !important;
    font-size: .875em !important;
}

// --- 供 VLOOK.js 使用 ---
// 扩展：前端触点角色（前缀为 @）
.v-actor-front {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc-a) !important;
}
// 扩展：重要系统角色
.v-actor-key-sys {
    stroke-width: 2 !important;
    font-weight: var(--v-f-w-bd) !important;
}
// 扩展：外部系统角色
.v-actor-ext-sys {
    stroke-dasharray: 6, 2 !important;
    font-style: italic !important;
}

/* ----- state diagram 状态机图 ----- */

// 开始
svg[aria-roledescription="stateDiagram"] .node circle.state-start {
    fill: var(--d-fc) !important;
    stroke: var(--d-fc) !important;
}

// 结束
svg[aria-roledescription="stateDiagram"] .node circle.state-end {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc) !important;
}

// 聚合
svg[aria-roledescription="stateDiagram"] .node .fork-join {
    fill: var(--d-fc-a) !important;
    stroke-width: 0 !important;
}

// 线条文本下的形状背景
svg[aria-roledescription="stateDiagram"] .edgeLabel .label rect {
    fill: var(--d-bc) !important;
}
// 线条文本
svg[aria-roledescription="stateDiagram"] .edgeLabel {
    text-align: center;
}
// 线条文本上鼠标悬停
svg[aria-roledescription="stateDiagram"] .edgeLabel:hover {
    color: var(--a-color) !important;
    cursor: crosshair;
}

// 状态节点
svg[aria-roledescription="stateDiagram"] .statediagram-state .label-container {
    fill: var(--d-fc) !important;
    stroke-width: 0 !important;
}
// 状态文本
svg[aria-roledescription="stateDiagram"] .statediagram-state .nodeLabel {
    color: var(--d-bc) !important;
    font-weight: bold !important;
}
svg[aria-roledescription="stateDiagram"] .statediagram-state .label {
    text-align: center;
}

// 状态节点上鼠标悬停
svg[aria-roledescription="stateDiagram"] .statediagram-state:hover .label-container {
    fill: var(--a-color) !important;
}
svg[aria-roledescription="stateDiagram"] .statediagram-state:hover .nodeLabel {
    color: @buttonForeColor !important;
}

// 状态组外容器
svg[aria-roledescription="stateDiagram"] .statediagram-cluster .outer {
    fill: var(--d-fc-a) !important;
    stroke: var(--d-fc-a) !important;
}
// 状态组内容器
svg[aria-roledescription="stateDiagram"] .statediagram-cluster .inner,
svg[aria-roledescription="stateDiagram"] .nodes .divider {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc-a) !important;
}
// 状态组标题
svg[aria-roledescription="stateDiagram"] .statediagram-cluster .cluster-label .nodeLabel {
    color: var(--d-fc) !important;
}
svg[aria-roledescription="stateDiagram"] .statediagram-cluster .cluster-label {
    text-align: center;
}

// 注释
svg[aria-roledescription="stateDiagram"] .statediagram-note rect {
    stroke: var(--ac-ye) !important;
    stroke-dasharray: 5 !important;
    fill: var(--ac-ye) !important;
}
// 注释文本
svg[aria-roledescription="stateDiagram"] .statediagram-note .nodeLabel {
    color: var(--d-fc) !important;
    font-weight: normal !important;
}
svg[aria-roledescription="stateDiagram"] .statediagram-note .label div {
    text-align: left;
}

// 状态转换线
svg[aria-roledescription="stateDiagram"] .edgePaths .transition {
    stroke: var(--d-fc-a) !important;
}
// 箭头
svg[aria-roledescription="stateDiagram"] #statediagram-barbEnd {
    fill: var(--d-fc-a) !important;
    stroke:  var(--d-fc-a) !important;
}

/* ----- class diagram 类图 ----- */

// 类背景
svg[aria-roledescription^="class"] .node>rect.outer,
svg[aria-roledescription^="class"] .node path { // Typora 1.10.3-dev 集成 Mermaid 11.4 后的改变
    fill: var(--pn-c) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 2 !important;
}

// 类上鼠标悬停
svg[aria-roledescription^="class"] .node:hover .outer,
svg[aria-roledescription^="class"] .node:hover :is(.outer+.divider, .outer+.divider+.divider) {
    stroke: var(--a-color) !important;
}

// 类属性、方法分隔线
svg[aria-roledescription^="class"] .node>line.divider {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}
svg[aria-roledescription^="class"] .node>rect.outer + line.divider {
    stroke: var(--d-fc-a) !important;
    stroke-width: 2 !important;
}

// 类名
svg[aria-roledescription^="class"] .label .classTitle .nodeLabel {
    font-weight: bold !important;
}
svg[aria-roledescription^="class"] .label .classTitle {
    text-align: center;
}

// 方法、属性等文本
svg[aria-roledescription^="class"] .label .nodeLabel {
    font-weight: normal !important;
}

// 线条文本背景
svg[aria-roledescription^="class"] .edgeLabel .label div {
    background-color: var(--d-bc) !important;
}
svg[aria-roledescription^="class"] .edgeLabel .label span {
    background-color: transparent !important;
}

// 线条文本上鼠标悬停
svg[aria-roledescription^="class"] .label .edgeLabel:hover {
    color: var(--a-color) !important;
    cursor: crosshair;
}

// 关系箭头
svg[aria-roledescription^="class"] :is(
/* Composition 组合 */
#classDiagram-compositionStart>path,
#classDiagram-compositionEnd>path,
/* Dependency 依赖, Association 关联 */
#classDiagram-dependencyStart>path,
#classDiagram-dependencyEnd>path,
#classDiagram-lollipopStart>circle) {
    fill: var(--d-fc-a) !important;
    stroke:  var(--d-fc-a) !important;
    stroke-width: 1 !important;
}
svg[aria-roledescription^="class"] :is(
/* Aggregation 聚合 */
#classDiagram-aggregationStart>path,
#classDiagram-aggregationEnd>path,
/* Inheritance 继承, Realization 实现 */
#classDiagram-extensionStart>path,
#classDiagram-extensionEnd>path) {
    fill: var(--d-bc) !important;
    stroke:  var(--d-fc-a) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 100 !important; // 取消父元素的虚线
}

// 关系线
svg[aria-roledescription^="class"] .edgePaths .relation {
    stroke: var(--d-fc-a) !important;
}

/* ----- block diagram 方块图 ----- */

// 图元
svg[aria-roledescription="block"] .node :is(circle, polygon, path),
svg[aria-roledescription="block"] .node rect:not([class*="cluster"]) {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc) !important;
}
// 针对 hover
svg[aria-roledescription="block"] .node:hover :is(circle, polygon, path),
svg[aria-roledescription="block"] .node:hover rect:not([class*="cluster"]) {
    fill: var(--ac-t1-a) !important;
    stroke: var(--a-color) !important;
    cursor: crosshair;
}

// 分组
svg[aria-roledescription="block"] .node .cluster {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc-a) !important;
    stroke-dasharray: 6 6 !important;
    box-shadow: none !important;
}
// 针对 hover
svg[aria-roledescription="block"] .node:hover .cluster {
    stroke: var(--a-color) !important;
    cursor: crosshair;
}

// 箭头
svg[aria-roledescription="block"] .flowchart-link {
    stroke: var(--d-fc-a) !important;
}
svg[aria-roledescription="block"] #mermaidChart11_block-pointEnd path {
    fill: var(--d-fc-a) !important;
    stroke: none !important;
}

/* ----- sankey diagram 桑基图 ----- */

svg[aria-roledescription="sankey"] {
    width: 100% !important;
}

/* ----- gantt diagram 甘特图 ----- */

// 标题
svg[aria-roledescription="gantt"] .titleText {
    text-anchor: middle !important;
    font-size: 1.5em !important;
    font-weight: var(--v-f-w-title) !important;
    fill: var(--d-fc) !important;
}

// 分区背景
svg[aria-roledescription="gantt"] .section {
    stroke: none !important;
}
svg[aria-roledescription="gantt"] :is(.section0, .section2, .section4) {
    fill: var(--d-fc-a) !important;
    opacity: .15 !important;
}
svg[aria-roledescription="gantt"] :is(.section1, .section3, .section5) {
    fill: var(--d-fc-a) !important;
    opacity: .05 !important;
}

// 日期
svg[aria-roledescription="gantt"] .grid>.tick>line {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
    opacity: .3 !important;
}
svg[aria-roledescription="gantt"] .grid>.tick>text {
    fill: var(--d-fc-a) !important;
}

// 排除的日期
svg[aria-roledescription="gantt"] .exclude-range {
    fill: var(--ac-ye) !important;
    opacity: .15 !important;
}

// 当前时间标识线
svg[aria-roledescription="gantt"] g.today line.today {
    stroke: var(--ac-rd) !important;
    stroke-width: 3 !important;
}

// 普通任务-执行中
svg[aria-roledescription="gantt"] rect[class*="active"] {
    fill: var(--ac-bu-a) !important;
    stroke: var(--ac-bu) !important;
    stroke-width: 1 !important;
}
// 普通任务-已完成
svg[aria-roledescription="gantt"] rect[class*="done"] {
    fill: var(--ac-gy-a) !important;
    stroke: var(--ac-bu) !important;
    stroke-width: 1 !important;
    stroke-dasharray: none !important;
}

// 关键任务-执行中
svg[aria-roledescription="gantt"] rect[class*="activeCrit"] {
    fill: var(--ac-rd-a) !important;
    stroke: var(--ac-rd) !important;
    stroke-width: 1 !important;
}
// 关键任务-已完成
svg[aria-roledescription="gantt"] rect[class*="doneCrit"] {
    fill: var(--ac-gy-a) !important;
    stroke: var(--ac-rd) !important;
    stroke-width: 1 !important;
    stroke-dasharray: none !important;
}

// 普通未来任务
svg[aria-roledescription="gantt"] rect[class^="task task"] {
    fill: var(--d-bc) !important;
    stroke: var(--ac-bu) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 4 !important;
}
// 关键未来任务
svg[aria-roledescription="gantt"] rect[class^="task crit"] {
    fill: var(--d-bc) !important;
    stroke: var(--ac-pu) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 4 !important;
}

// 里程碑
svg[aria-roledescription="gantt"] rect[class^="task milestone"] {
    fill: var(--d-fc) !important;
    stroke: none !important;
    stroke-width: 2 !important;
    stroke-dasharray: none !important;
}

/* ----- XY Chart XY图 ----- */

// 背景
svg[aria-roledescription="xychart"] .main > rect {
    fill: var(--d-bc) !important;
}
// 坐标、刻度
svg[aria-roledescription="xychart"] :is(.axis-line, .axisl-line, .ticks) > path {
    stroke: var(--d-fc-a) !important;
}

// 文本
svg[aria-roledescription="xychart"] :is(.chart-title, .title) > text {
    fill: var(--d-fc) !important;
    color: var(--d-fc) !important;
}
svg[aria-roledescription="xychart"] .title > text {
    fill: var(--d-fc-a) !important;
    color: var(--d-fc-a) !important;
}
svg[aria-roledescription="xychart"] .chart-title > text {
    font-weight: bold;
}

// 图表
svg[aria-roledescription="xychart"] .plot rect {
    fill: var(--ac-t1) !important;
    opacity: .5;
}
svg[aria-roledescription="xychart"] .plot rect:hover {
    opacity: 1;
    cursor: crosshair;
}
svg[aria-roledescription="xychart"] .plot path {
    stroke: var(--ac-t2) !important;
}

/* ----- Quadrant Chart 四象限图 ----- */

// 文本
svg[aria-roledescription="quadrantChart"] :is(.title, .label, .quadrant, .data-point) > text {
    fill: var(--d-fc) !important;
    color: var(--d-fc) !important;
}
svg[aria-roledescription="quadrantChart"] .quadrant > text {
    fill: var(--d-fc-a) !important;
    color: var(--d-fc-a) !important;
    font-weight: var(--v-f-w-bd);
}
svg[aria-roledescription="quadrantChart"] .label > text {
    font-style: italic;
}
svg[aria-roledescription="quadrantChart"] :is(.title, .data-point) > text {
    font-weight: bold;
}

// 矩阵
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant > rect {
    fill: var(--d-fc-a) !important;
}
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant:first-child > rect {
    opacity: .2;
}
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant+.quadrant > rect {
    opacity: .15;
}
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant+.quadrant+.quadrant > rect {
    opacity: .1;
}
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant+.quadrant+.quadrant+.quadrant > rect {
    opacity: .05;
}
// 矩阵边框
svg[aria-roledescription="quadrantChart"] .border line {
    stroke: var(--d-fc-a) !important;
}

// 数据点
svg[aria-roledescription="quadrantChart"] .data-point > circle {
    fill: var(--ac-t1) !important;
}

// 针对 hover
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant:hover > rect {
    fill: var(--ac-t1-a) !important;
    opacity: .75 !important;
    cursor: crosshair;
}
svg[aria-roledescription="quadrantChart"] .quadrants>.quadrant:hover > text {
    fill: var(--d-fc) !important;
    color: var(--d-fc) !important;
    cursor: crosshair;
}
svg[aria-roledescription="quadrantChart"] .data-point:hover > text {
    fill: var(--ac-t1) !important;
}

/* ----- Gitgraph 历史图 ----- */

// 标题
svg[aria-roledescription="gitGraph"] .gitTitleText {
    fill: var(--d-fc) !important;
    font-weight: var(--v-f-w-title) !important;
}

// 分支文字
svg[aria-roledescription="gitGraph"] .branchLabel .row {
    font-weight: var(--v-f-w-bd) !important;
    fill: fade(#FFFFFF, 90%);
    font-size: .875em;
}

// 提交节点
svg[aria-roledescription="gitGraph"] .commit-bullets :is(.commit0, .commit1, .commit2, .commit3, .commit4, .commit5, .commit6, .commit7) {
    stroke: var(--d-bc) !important;
    stroke-width: 2 !important;;
}

// 分支分隔行
svg[aria-roledescription="gitGraph"] .branch {
    stroke: var(--d-fc-a) !important;
    opacity: .3 !important;
}

// 分支 0 - 主分支
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label0,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit0 {
    fill: var(--ac-bu) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow0 {
    stroke: var(--ac-bu) !important;
}

// 分支 1
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label1,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit1 {
    fill: var(--ac-og) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow1 {
    stroke: var(--ac-og) !important;
}

// 分支 2
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label2,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit2 {
    fill: var(--ac-ro) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow2 {
    stroke: var(--ac-ro) !important;
}

// 分支 3
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label3,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit3 {
    fill: var(--ac-bn) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow3 {
    stroke: var(--ac-bn) !important;
}

// 分支 4
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label4,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit4 {
    fill: var(--ac-pu) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow4 {
    stroke: var(--ac-pu) !important;
}

// 分支 5
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label5,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit5 {
    fill: var(--ac-rd) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow5 {
    stroke: var(--ac-rd) !important;
}

// 分支 6
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label6,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit6 {
    fill: var(--ac-vn) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow6 {
    stroke: var(--ac-vn) !important;
}

// 分支 7
svg[aria-roledescription="gitGraph"] .branchLabelBkg.label7,
svg[aria-roledescription="gitGraph"] .commit-bullets .commit7 {
    fill: var(--ac-ye) !important;
}
svg[aria-roledescription="gitGraph"] .commit-arrows .arrow7 {
    stroke: var(--ac-ye) !important;
}

// 合并节点
svg[aria-roledescription="gitGraph"] .commit-bullets .commit-merge {
    stroke-width: 0 !important;
    fill: var(--d-bc) !important;
}

// 高亮节点
svg[aria-roledescription="gitGraph"] .commit-bullets .commit-highlight-outer {
    stroke: var(--d-bc) !important;
    stroke-width: 2 !important;
    fill: var(--d-fc) !important;
}
svg[aria-roledescription="gitGraph"] .commit-bullets .commit-highlight-inner {
    stroke-width: 2 !important;
    stroke: var(--d-bc) !important;
}

// 针对 tag 标签
svg[aria-roledescription="gitGraph"] .tag-label-bkg {
    fill: var(--ac-ye-fade) !important;
    stroke: var(--ac-ye-fade) !important;
}
svg[aria-roledescription="gitGraph"] .tag-hole {
    fill: var(--d-bc) !important;
    stroke: var(--ac-ye-fade) !important;
    stroke-width: 1 !important;
}
svg[aria-roledescription="gitGraph"] .tag-label {
    fill: var(--d-fc) !important;
    font-weight: normal;
}

// 提交标记背景
svg[aria-roledescription="gitGraph"] .commit-labels .commit-label-bkg {
    fill: var(--d-bc) !important;
    opacity: .25;
}

// 提交标记文本
svg[aria-roledescription="gitGraph"] .commit-labels .commit-label {
    fill: var(--d-fc) !important;
    font-weight: var(--v-f-w-bd);
}

/* ----- C4 diagrams C4 图 ----- */

svg[aria-roledescription="c4"] g[class] :is(tspan, text) {
    fill: var(--d-fc-dk) !important;
}

svg[aria-roledescription="c4"] #arrowhead path {
    fill: var(--d-fc) !important;
    stroke: none !important;
}

svg[aria-roledescription="c4"] :is(line[stroke="blue"], path[stroke="blue"]) {
    stroke: var(--ac-bu) !important;
}
svg[aria-roledescription="c4"] :is(line[stroke="red"], path[stroke="red"]) {
    stroke: var(--ac-rd) !important;
}
svg[aria-roledescription="c4"] [stroke="#444444"] {
    stroke: var(--ac-gy) !important;
}

/* ----- ZenUML 图 ----- */

.md-diagram-panel>div>svg[aria-roledescription="zenuml"] {
    border: 0 !important;
    background: none !important;
}
svg[aria-roledescription="zenuml"] .bg-skin-frame {
    border-radius: var(--v-r-b);
    border: @imgBorderWidth solid var(--pn-c);
    margin: 0;
}

// 导出后的样式微调
@{writeOnHTML} svg[aria-roledescription="zenuml"] div[alt^="icon"]>svg {
    width: 75% !important;
}
@{writeOnHTML} svg[aria-roledescription="zenuml"] div[alt^="icon"] {
    margin-left: 4px; // = 32px * (100% - 75%) / 2
}

svg[aria-roledescription="zenuml"] div[alt^="icon"]>svg path[stroke] {
    stroke: var(--d-fc) !important;
}
svg[aria-roledescription="zenuml"] div[alt^="icon"]>svg>path[fill],
svg[aria-roledescription="zenuml"] div[alt^="icon"]>svg g:not([id^="Icon-Architecture"])>path[fill] {
    fill: var(--d-fc) !important;
}

svg[aria-roledescription="zenuml"] .bg-skin-title {
    background: none;
}

svg[aria-roledescription="zenuml"] .zenuml :is(label, p) {
    color: var(--d-fc) !important;
    margin: 0;
}

svg[aria-roledescription="zenuml"] .zenuml .collapse-button :is(line, polyline) {
    stroke: var(--d-fc);
    fill: var(--d-fc);
}

svg[aria-roledescription="zenuml"] .zenuml :is(.fill-current, .collapse-button) {
    border-color: var(--d-fc-a);
}

svg[aria-roledescription="zenuml"] .interaction:hover {
    cursor: crosshair;
}

.theme-mermaid {
    --color-bg-base: var(--d-bc);
    --color-text-base: var(--d-fc);
    --color-border-base: var(--d-fc-a);
    --color-bg-occurrence: var(--d-fc-a);
}

/* ----- Entity Relationship (ER) 实体关系图 ----- */

// 实体背景
svg[aria-roledescription="er"] g .entityBox {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 2 !important;
}

// 实体上鼠标悬停
svg[aria-roledescription="er"] g:hover .entityBox {
    stroke: var(--a-color) !important;
    cursor: crosshair;
}

// 实物名称
svg[aria-roledescription="er"] g>text.entityLabel:first-of-type {
    font-weight: bold !important;
}

// 属性（奇数行）
svg[aria-roledescription="er"] g .attributeBoxOdd {
    fill: var(--d-fc-a) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
    opacity: .3 !important;
}
// 针对（偶数行）
svg[aria-roledescription="er"] g .attributeBoxEven {
    fill: var(--d-fc-a) !important;
    stroke: var(--d-fc-a) !important;
    opacity: .2 !important;
}

// 线条文本背景
svg[aria-roledescription="er"] .relationshipLabelBox {
    fill: var(--d-bc) !important;
    opacity: 1 !important;
}

// 关系箭头
svg[aria-roledescription="er"] :is(
    #ONLY_ONE_START>path,
    #ONLY_ONE_END>path,
    #ZERO_OR_ONE_START>path,
    #ZERO_OR_ONE_END>path,
    #ONE_OR_MORE_START>path,
    #ONE_OR_MORE_END>path,
    #ZERO_OR_MORE_START>path,
    #ZERO_OR_MORE_END>path,
    .relationshipLine) {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}
svg[aria-roledescription="er"] :is(
    #ZERO_OR_ONE_START,
    #ZERO_OR_ONE_END,
    #ZERO_OR_MORE_START,
    #ZERO_OR_MORE_END)>circle {
    fill: var(--d-bc) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}

/* ----- timeline 时间线图 ----- */

// 标题
svg[aria-roledescription="timeline"] > text {
    fill: var(--d-fc-a) !important;
}

// 分段
svg[aria-roledescription="timeline"] g>g[class*="section"] path {
    fill: var(--d-bc) !important;
}
svg[aria-roledescription="timeline"] g>g[class*="section"] line {
    stroke: var(--pn-c) !important;
}
svg[aria-roledescription="timeline"] g>g[class*="section"] text>tspan {
    fill: var(--d-fc-a) !important;
    font-style: italic !important;
}

// 时间连接线
svg[aria-roledescription="timeline"] .lineWrapper>line {
    stroke: var(--d-fc-a) !important;
}

// 年份
svg[aria-roledescription="timeline"] .taskWrapper>g[class*="section"] path {
    fill: var(--pn-c) !important;
}
svg[aria-roledescription="timeline"] .taskWrapper>g[class*="section"] line {
    stroke: var(--d-fc-a) !important;
    opacity: .5 !important;
}
svg[aria-roledescription="timeline"] .taskWrapper>g[class*="section"] text>tspan {
    fill: var(--d-fc) !important;
    font-weight: bold !important;
    font-style: normal !important;
}

// 事件
svg[aria-roledescription="timeline"] .eventWrapper>g[class*="section"] path {
    fill: var(--d-fc-a) !important;
}
svg[aria-roledescription="timeline"] .eventWrapper>g[class*="section"] line {
    stroke: var(--d-fc) !important;
}
svg[aria-roledescription="timeline"] .eventWrapper>g[class*="section"] text>tspan {
    fill: var(--d-bc) !important;
    font-weight: bold !important;
    font-style: normal !important;
}

/* ----- Mindmap 思维导图 ----- */

// 节点
svg[aria-roledescription="mindmap"] g .mindmap-node :is(rect, circle, path, polygon) {
    fill: var(--d-fc-a) !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node line {
    stroke: var(--d-fc) !important;
    stroke-width: 3px !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node text tspan {
    fill: var(--d-fc-lg) !important;
}

// 节点：根节点
svg[aria-roledescription="mindmap"] g .mindmap-node.section-root :is(rect, circle, path, polygon) {
    fill: var(--d-fc) !important;
    stroke-width: 5px !important;
    stroke: var(--d-fc-a) !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node.section-root text tspan {
    fill: var(--d-bc) !important;
    font-weight: bold !important;
}

// 节点 hover 样式
svg[aria-roledescription="mindmap"] g .mindmap-node {
    cursor: crosshair;
}
svg[aria-roledescription="mindmap"] g .mindmap-node:hover :is(rect, circle, path, polygon) {
    fill: var(--d-fc) !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node:hover text tspan {
    fill: var(--d-bc) !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node.section-root:hover :is(rect, circle, path, polygon) {
    fill: var(--d-bc) !important;
}
svg[aria-roledescription="mindmap"] g .mindmap-node.section-root:hover text tspan {
    fill: var(--d-fc) !important;
}

// 节点：第 1 类节点
svg[aria-roledescription="mindmap"] g .section-0 :is(rect, circle, path, polygon) {
    fill: var(--ac-gd-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-0 {
    stroke: var(--ac-gd-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-0 {
    opacity: .25 !important;
}
// 节点：第 2 类节点
svg[aria-roledescription="mindmap"] g .section-1 :is(rect, circle, path, polygon) {
    fill: var(--ac-lm-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-1 {
    stroke: var(--ac-lm-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-1 {
    opacity: .4 !important;
}
// 节点：第 3 类节点
svg[aria-roledescription="mindmap"] g .section-2 :is(rect, circle, path, polygon) {
    fill: var(--ac-aq-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-2 {
    stroke: var(--ac-aq-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-2 {
    opacity: .55 !important;
}
// 节点：第 4 类节点
svg[aria-roledescription="mindmap"] g .section-3 :is(rect, circle, path, polygon) {
    fill: var(--ac-pk-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-3 {
    stroke: var(--ac-pk-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-3 {
    opacity: .7 !important;
}
// 节点：第 5 类节点
svg[aria-roledescription="mindmap"] g .section-4 :is(rect, circle, path, polygon) {
    fill: var(--ac-ye-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-4 {
    stroke: var(--ac-ye-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-4 {
    opacity: .85 !important;
}
// 节点：第 6 类节点
svg[aria-roledescription="mindmap"] g .section-5 :is(rect, circle, path, polygon) {
    fill: var(--ac-la-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-5 {
    stroke: var(--ac-la-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-5 {
    opacity: 1 !important;
}
// 节点：第 7 类节点
svg[aria-roledescription="mindmap"] g .section-6 :is(rect, circle, path, polygon) {
    fill: var(--ac-gy-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .section-edge-6 {
    stroke: var(--ac-gy-lg) !important;
}
svg[aria-roledescription="mindmap"] .mindmap-edges .edge-depth-6 {
    opacity: 1 !important;
}

// 针对 icon
svg[aria-roledescription="mindmap"] g .mindmap-node i[class*="node-icon"] {
    color: var(--d-bc) !important;
}

// 线
svg[aria-roledescription="mindmap"] g.mindmap-edges path {
    stroke: var(--d-fc-a) !important;
    opacity: .5 !important;
}

.v-mm-hide {
    visibility: hidden !important;
}

/* ----- requirement 需求图 ----- */

// 卡片背景
svg[aria-roledescription="requirement"] g>.reqBox {
    fill: var(--pn-c) !important;
    stroke: var(--d-fc-a) !important;
    stroke-width: 2 !important;
}
// 分隔线
svg[aria-roledescription="requirement"] g>.req-title-line {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}

// 卡片上鼠档悬停
svg[aria-roledescription="requirement"] g:hover>:is(.reqBox, .req-title-line) {
    stroke: var(--a-color) !important;
    cursor: crosshair;
}
svg[aria-roledescription="requirement"] g:hover>.reqLabel{
    cursor: crosshair;
}

// 文本
svg[aria-roledescription="requirement"] g>text.reqLabel>tspan {
    fill: var(--d-fc) !important;
}

// 标题
svg[aria-roledescription="requirement"] g>text.reqTitle>tspan {
    fill: var(--d-fc) !important;
    font-weight: bold !important;
}
// 分类
svg[aria-roledescription="requirement"] g>text.reqTitle>tspan:first-child {
    fill: var(--d-fc-a) !important;
    font-weight: normal !important;
}

// 线条
svg[aria-roledescription="requirement"] path.relationshipLine {
    stroke: var(--d-fc-a) !important;
    stroke-width: 1 !important;
}
// 线条文本背景
svg[aria-roledescription="requirement"] rect.reqLabelBox {
    fill: var(--d-bc) !important;
}

// 线条文本上鼠标悬停
svg[aria-roledescription="requirement"] .relationshipLabel:hover {
    fill: var(--a-color) !important;
    cursor: crosshair;
}

// 箭头
svg[aria-roledescription="requirement"] :is(#arrow_line_ending, #contains_line_ending) :is(circle, line, path) {
    stroke: var(--d-fc-a) !important;
}

/**************************************
* VLOOK 针对 Mermaid 增加
**************************************/
.v-mermaid-restyler {
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -9px !important;
}
